<template>
	<view class="" style="width: 100%;min-height: 100vh;">
		<cu-custom :isBack="true" :bgColor="'var(--primaryBg)'">
				<view slot="content" class="title">
					{{title}}
				</view>
		</cu-custom>
		<view class="box">
			<view class="head" style="margin-bottom: 1000rpx;">
				<view class="grow-record">
					<view class="form-box">
						<view class="grow-name">
							服务名称
						</view>
						<view class="grow-cont1">
							<input v-model="form.name" maxlength="30" type="text" placeholder="输入服务名称(必填)"/>
						</view>
					</view>
					
					<view class="form-box">
						<view class="grow-name">
							服务描述
						</view>
						<view class="grow-cont">
							<ws-textarea v-model="form.description" :maxlength="200" placeholder="输入服务描述内容"></ws-textarea>
							<view class="num-box">
								{{form.description?form.description.length : 0}}/200
							</view>
						</view>
					</view>
					
					<view class="form-box">
						<view class="grow-name">
							使用限制
						</view>
						<view class="grow-cont">
							<ws-textarea v-model="form.employ" :maxlength="200" placeholder="输入使用限制内容"></ws-textarea>
							<view class="num-box">
								{{form.employ?form.employ.length : 0}}/200
							</view>
						</view>
					</view>
					
				</view>
				
				
				<view class="" style="height: 300rpx;">
				</view>
			</view>
		
		</view>
		
	
		<view @click="submit" class="bottom-box">
			确定
		</view>
		
		
		
	</view>
</template>

<script>
	import {addMyService,editMyService,detailMyService} from "@/api/pet/service/saler.js"
	export default {
		data() {
			return {
				title:'新增服务',
				form: {},
				pet_team:{},
			}
		},
		onLoad(e) {
			this.reg()
			this.pet_team = uni.getStorageSync('pet_team')
			if(e.id){
				this.title = '编辑服务'
				this.getDetail(e.id)
			}
		},
		methods: {
			reg(){
				this.form = {
					name:'',
					description:'',
					employ:''
				}
			},
			getDetail(id){
				detailMyService({id:id}).then(res=>{
					this.form = res
				})
			},
			submit(){
				if(!this.form.name) return uni.showToast({title:'请填写服务名称',icon:'none'})
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let api = this.form.id?editMyService:addMyService
				api({...this.form,...this.pet_team}).then(res=>{
					uni.hideLoading()
					uni.showToast({title:'操作成功',icon:'none'})
					uni.navigateBack()
				})
			}
		},
	}
</script>
<style>
page{
	background: #f8f8f8;
}
</style>
<style scoped lang="scss">
	.bottom-box{
		position: fixed;
		bottom: 46rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 686rpx;
		height: 96rpx;
		background: var(--primaryBg);
		border-radius: 48rpx;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: var(--btnColor);
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.grow-record{
		padding: 40rpx 24rpx;
		margin: 16rpx;
		width: 718rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		box-sizing: border-box;
		.form-box{
			border-bottom: 1rpx solid  #EEEEEE;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
				border-bottom: 0;
				padding-bottom: 0;
			}
		}
		.grow-cont1{
			input{
				width: 100%;
				height: 90rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				padding: 0 28rpx;
			}
		}
		.grow-cont{
			margin-top: 32rpx;
			padding: 24rpx 28rpx;
			width: 670rpx;
			height: 280rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			position: relative;
			.num-box{
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color:var(--h4Color);
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}
		}
		.grow-name{
			margin-bottom: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: var(--h1Color);
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}
	}
	
	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			height: 376rpx;
			display: flex;
			background: linear-gradient(180deg, var(--primaryBg) 0%, rgba(255, 227, 89, 0) 100%);
			display: flex;
			flex-direction: column;

		
			.title-cont {
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: var(--h1Color);
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}



	}
</style>